<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Oracle 数据库转 Word</title>
    <link type="text/css" rel="stylesheet" href="" th:href="@{/bootstrap/css/bootstrap.css}">
    <script type="text/javascript" src="" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" src="" th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <script type="text/javascript">
        $(function () {
            //全选按钮事件
            $("#allChecked").change(function () {
                if ($(this).is(':checked')) {
                    //全选
                    $("tbody :checkbox").prop("checked", true);
                } else {
                    //全不选
                    $("tbody :checkbox").prop("checked", false);
                }
            });

            //"一键生成 Word 文档"按钮点击事件
            $("#generateWord").on("click", function () {
                var tableNames = [];
                $("tbody :checkbox:checked").each(function () {
                    tableNames.push($(this).val());
                });
                if (tableNames.length <= 0) {
                    alert("请先选择需要导出的表！");
                    return;
                }
                //因为需要传递很多的表名参数，所以不能使用 get 请求，使用 ajax 也不是很方便，最快捷的是通过 form 表单操作
                //将多个表名参数赋给隐藏的 form 表单属性，值如：a,b,c,d,e,f,g
                $("#db2Doc>input").val(tableNames.toString());
                //提交表单
                $("#db2Doc").submit();
                setTimeout(function () {
                    $("#db2Doc>input").val("");
                    console.log(1);
                }, 3000);
            });
        });
    </script>
</head>
<body style="width: 80%;margin: auto">

<!--顶部的描述信息-->
<div style="margin-top: 30px;">
    <h3 style="margin-left: 25%">Oracle 数据库表一键生成 Word 文档</h3>
    <p><span style="color: red">数据库版本</span>：<span th:text="${driverVersion}"></span></p>
    <p><span style="color: red">数据库连接</span>：<span th:text="${url}"></span></p>
    <p><span style="color: red">数据库用户</span>：<span th:text="${userName}"></span></p>
    <button type="button" id="generateWord" class="btn btn-primary" style="margin-left: 45%">一键生成 Word 文档</button>
    <span style="margin-left: 50px;font-size: 12px"><a href="https://wangmaoxiong.blog.csdn.net/" target="_blank">蚩尤后裔提供技术支持</a></span>
    <p></p>
</div>

<!--表格数据-->
<div>
    <table class="table table-striped">
        <thead class="thead-dark">
        <tr>
            <th scope="col">序号</th>
            <th scope="col">表名</th>
            <th scope="col"><input id="allChecked" type="checkbox" class="form-check-input" style="margin-top: -10px">
            </th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="table,loopStatus : ${allTable}">
            <th scope="row" th:text="${loopStatus.count}"></th>
            <td th:text="${table.table_name}"></td>
            <td><input type="checkbox" th:value="${table.table_name}" class="form-check-input"></td>
        </tr>

        </tbody>
    </table>
</div>

<!--创建一个隐藏的 form 表单，用于post请求传递参数，然后服务器返回下载的文件流，浏览器会自动进行下载-->
<form id="db2Doc" method="post" action="./db2Doc" enctype="multipart/form-data">
    <input type="hidden" name="tableNames" value=""/>
</form>

</body>
</html>